<template>
  <div class="home">
    <el-container>
      <el-main>
        <router-view :searchVal="searchVal" />
        <div class="home-position" v-show="!isModify">
          <el-button
            :loading="loading"
            @click="modifStationStatus()"
            circle
            :class="statusclass"
            size="medium"
            >{{ status }}<br />接单</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {
  setStaticStatus,
  logout
} from "@/api/api";
export default {
  name: 'Home',
  data () {
    return {
      activeIndex: '1',
      Width: 0,
      Height: 0,
      searchVal: [],
      UserInfo: {},
      status: '',
      statusclass: 'stop',
      loading: false,
      isModify: false,
      logout_flag: false
    }
  },
  beforeCreate () {
    if (!JSON.parse(sessionStorage.getItem('userInfo'))) {
      console.log('跳转');
      this.$router.push('')
    }
  },
  mounted () {
    this.GetdivSize()
    if (JSON.parse(sessionStorage.getItem('userInfo'))) {
      this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.status = this.UserInfo.WbInfo.Status ? '停止' : '开启'
      this.statusclass = this.UserInfo.WbInfo.Status ? 'stop' : 'start'
      this.logout_flag = this.UserInfo.WbInfo.Status ? false : true
      this.loading = false
    }
    if (this.$router.currentRoute.path.toLocaleLowerCase().indexOf('linepatrol') != -1) {
      this.isModify = true;
    } else {
      if (this.$router.currentRoute.path.toLocaleLowerCase().indexOf("opt") != -1) {
        this.isModify = false;
      } else {
        this.isModify = true;
      }

    }
  },
  methods: {
    GetdivSize () {
      this.Width = document.body.clientWidth;
      this.Height = document.body.clientHeight;
      this.searchVal = [this.Width, this.Height]
    },
    modifStationStatus () {
      this.loading = true
      this.$confirm('是否关闭(开启)工作台,此操作将停止(开启)分配任务到本工作台', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
          UserId: this.UserInfo.UserId,
          WbId: this.UserInfo.WbId,
          Status: this.UserInfo.WbInfo.Status ? 0 : 1,
        };
        setStaticStatus(param).then((res) => {
          if (res.data.code == 0) {
            this.UserInfo.WbInfo.Status = this.UserInfo.WbInfo.Status ? 0 : 1;
            this.status = this.UserInfo.WbInfo.Status ? '停止' : '开启'
            this.statusclass = this.UserInfo.WbInfo.Status ? 'stop' : 'start'
            this.logout_flag = this.UserInfo.WbInfo.Status ? false : true
            sessionStorage.removeItem('userInfo')
            sessionStorage.setItem('userInfo', JSON.stringify(this.UserInfo))
          } else {
            this.$message({
              message: res.data.message,
              type: "info",
            });
          }
          this.loading = false
        });
      }).catch(() => {
        this.loading = false
      })
    },
    Logout () {
      const params = { UserId: this.UserInfo.UserId };
      logout(params).then((res) => {
        this.UserInfo.UserId = "";
        this.UserInfo.WbInfo.WbName = "";
        this.hideLogout = false;
        sessionStorage.clear();
        window.location.reload();
      });
    },
  }
}
</script>
<style lang="scss">
.el-menu-demo {
  width: 100%;
}
.el-main {
  padding: 6px !important;
}
.el-card__body {
  padding: 10px !important;
}
.home-position {
  position: absolute;
  right: 80px;
  bottom: 60px;
  //   border: 1px solid #fa7e23;
}
.stop {
  color: #ffffff !important;
  background-color: #f2854c !important;
  height: 13vh !important;
  width: 13vh !important;
  text-align: center !important;
  font-size: 2.2vh !important;
  display: block !important;
}
.start {
  color: #ffffff !important;
  background-color: #8bba30 !important;
  height: 13vh !important;
  width: 13vh !important;
  text-align: center !important;
  font-size: 2.2vh !important;
  display: block !important;
}
</style>
